<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/Main' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-row>
        <el-button class='add-button' type="primary" @click='showAddDialog'>添加分类</el-button>
      </el-row>
      <Tree class='tree' :data='tableData' :columns='treeCol' :selection-type='false' :expand-type='false' show-index index-text='' border >
        <template slot='deleted' slot-scope='data'>
          <i class="el-icon-success" v-if='data.row.cat_deleted == false' style='color:lightgreen; font-size:20px;'></i>
          <i class="el-icon-error" v-else style='color:lightred; font-size:20px;'></i>
        </template>
        <template slot='level' slot-scope='data'>
          <el-tag v-if='data.row.cat_level == 0'>一级</el-tag>
          <el-tag type='success' v-else-if='data.row.cat_level == 1'>二级</el-tag>
          <el-tag type='warning' v-else>三级</el-tag>
        </template>
        <template slot='opt' slot-scope='data'>
          <el-button type="primary" size='mini' icon="el-icon-edit" @click='showEdit( data.row )'>编辑</el-button>
          <el-button type="danger" size='mini' icon="el-icon-delete" @click='deleteCa( data.row.cat_id )'>删除</el-button>
        </template>
      </Tree>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page='FormData.pagenum'
        :page-sizes="[5, 10, 20, 30]"
        :page-size="FormData.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-card>
    <el-dialog
      title="添加分类"
      :visible.sync="addDialogVisi"
      width="50%"
      :before-close="handleClose">
      <el-form :model="addForm" :rules="addForm_rules" ref="addForm_ref" label-width="100px" class="demo-ruleForm">
        <el-form-item label="分类名称" prop="cat_name">
          <el-input v-model="addForm.cat_name"></el-input>
        </el-form-item>
        <el-form-item label="父级分类">
          <el-cascader
            v-model='selectIndex'
            :options="options"
            :props='props'
            clearable>
          </el-cascader>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisi = false">取 消</el-button>
        <el-button type="primary" @click="addCa">添 加</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="修改分类"
      :visible.sync="editDialogVisi"
      width="50%"
      :before-close="editClose">
      <el-form :model="selectItem" :rules="addForm_rules" ref="editForm_ref" label-width="100px" class="demo-ruleForm">
        <el-form-item label="分类名称" prop="cat_name">
          <el-input v-model="selectItem.cat_name"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisi = false">取 消</el-button>
        <el-button type="primary" @click="editCa">修 改</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      treeCol:[
        {
          label: '分类名称',
          prop: 'cat_name',
        },
        {
          label: '是否有效',
          type: 'template',
          template: 'deleted',
        },
        {
          label: '排序',
          type: 'template',
          template: 'level',
        },
        {
          label: '操作',
          type: 'template',
          template: 'opt',
        },
      ],
      tableData:[],
      total:0,
      FormData:{
        type:3,
        pagesize:10,
        pagenum:1
      },
      addDialogVisi: false,
      editDialogVisi: false,
      addForm: {
        cat_pid:0,
        cat_name:'',
        cat_level:0
      },
      addForm_rules: {
        cat_name: [
          { required: true, message: '请输入分类名称', trigger: 'blur' }
        ],
      },
      options:[],
      props:{ 
        expandTrigger: 'hover',
        checkStrictly: true,
        value:'cat_id',
        children:'children',
        label:'cat_name'  
      },
      selectIndex:[],
      selectItem:{
        cat_name:''
      },
    }
  },
  methods: {
    async getData(){
      let res = await this.axios.get('/categories', { params: this.FormData })
      if( res.meta.status !== 200 ) return this.pop.error( res.meta.msg )
      this.tableData = res.data.result
      this.total = res.data.total
    },
    handleSizeChange(id){
      this.FormData.pagesize = id
      this.getData()
    },
    handleCurrentChange(id){
      this.FormData.pagenum = id
      this.getData()
    },
    async showAddDialog() {
      let res = await this.axios.get('/categories', { params: { type:2 } })
      if( res.meta.status !== 200 ) return this.pop.error( res.meta.msg )
      this.options = res.data
      this.addDialogVisi = true
    },
    async addCa() {
      let rel = await this.$refs.addForm_ref.validate().catch( err=>err )
      if( !rel ) return this.pop.error('请正确填写')

      let res = await this.axios.post(`categories`, {
        cat_pid: this.selectIndex.length === 0 ? 0 : this.selectIndex[ this.selectIndex.length - 1 ],
        cat_level: this.selectIndex.length,
        cat_name: this.addForm.cat_name
      } )
      if( res.meta.status !== 201 ) return this.pop.error( res.meta.msg )
      this.pop.success( res.meta.msg )
      this.getData()
      this.addDialogVisi = false
    },
    handleClose() {
      this.$refs.addForm_ref.resetFields()
      this.addDialogVisi = false
    },
    async deleteCa( id ) {
      let rel  = await this.confirm('永久删除该分类', '删除分类', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).catch( err=>err )
      if( rel !== 'confirm' ) return;
      let res = await this.axios.delete(`/categories/${ id }`)
      if( res.meta.status !== 200 ) return this.pop.error( res.meta.msg )
      this.pop.success( res.meta.msg )
      this.getData()
    },
    showEdit( row ) {
      this.selectItem = row
      this.editDialogVisi = true
    },
    async editCa() {
      let rel = await this.$refs.editForm_ref.validate().catch( err=>err )
      if( !rel ) return this.pop.error('请正确填写')
      let res = await this.axios.put(`/categories/${ this.selectItem.cat_id }`, { cat_name:this.selectItem.cat_name })
      if( res.meta.status !== 200 ) return this.pop.error( res.meta.msg )
      this.pop.success( res.meta.msg )
      this.getData()
      this.editDialogVisi = false
    },
    editClose() {
      this.$refs.editForm_ref.resetFields()
      this.editDialogVisi = false
    }
  },
  created() {
    this.getData()
  }
  
}
</script>

<style>

</style>